<template>
  <div class="page login">
    <div @click="back" class="back"><i class="iconfont icon-fanhui"></i></div>
    <div class="logo">
      <img src="../../assets/img/3.svg" alt="" />
    </div>
    <div class="btns">
      <div class="btn" @click="loginClick">手机号登录</div>
      <transition enter-active-class="login-slide-in" leave-active-class="login-slide-out">
        <div class="ipts" v-show="showLog">
          <div class="phone">
            <i class="iconfont icon-youxiji"></i>
            <input type="text" v-model="phone" placeholder="请输入手机号" />
          </div>
          <div class="pass">
            <i class="iconfont icon-mima"></i>
            <input type="password" v-model="pass" placeholder="请输入密码" />
          </div>
          <button class="log-btn" @click="loginGo">登 录</button>
        </div>
      </transition>

      <!-- <div class="btn">注册</div> -->
    </div>
  </div>
</template>
<script>
import {loginApi} from '@/network/api'
export default {
  data() {
    return {
      showLog:false,
      phone:'13437972810',
      pass:''
    };
  },
  methods: {
    back() {
      this.$emit("input", false);
    },
    loginClick(){
      this.showLog=!this.showLog
    },
    // 登录功能
    loginGo() {
      loginApi({phone:this.phone,password:this.pass}).then(res=>{
        if(res.code==200){
          localStorage.setItem('cookie',res.cookie)
          this.$emit("input", false);
          this.$toast('登录成功')
          this.bus.$emit('upLog')
        }else{
          this.$toast(res.msg)
        }
      })
    },
  },
};
</script>
 
<style lang = "scss" scoped>
@import "@/assets/global-style.scss";
.login {
  z-index: 10009;
  background: url("../../assets/img/bg1.jpg");
  background-size: cover;
  .back {
    margin: 10px;
    background: rgba($color: #3c7497, $alpha: 1);
    opacity: 0.7;
    display: inline-block;
    padding: 5px;
    i {
      color: #fff;
      font-size: 24px;
    }
  }
  .logo {
    background: $theme-color;
    padding: 2px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 66px;
    opacity: 0.9;
    img {
      width: 100%;
    }
  }
  .btns {
    position: relative;
    margin-top: 180px;
    .btn {
      margin: 20px auto 0;
      border-radius: 15px;
      width: 84%;
      text-align: center;
      height: 33px;
      line-height: 33px;
      border: 1px solid $theme-color;
      color: $theme-color;
      font-size: 14px;
      font-weight: 600;
      background: rgba($color: #c1dee2, $alpha: 0.9);
    }
  }
}

.ipts {
  margin: 0 auto;
  background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4228561911,386253394&fm=26&gp=0.jpg);
  background-size: contain;
  padding: 20px;
  border-bottom: 1px solid #eee;
  .pass,
  .phone {
    margin: 10px 0;
    border-bottom: 1px solid #666;
    display: flex;
    align-items: center;
  }
  i {
    font-size: 28px;
  }
  input {
    border: none;
    outline: none;
    margin-left: 10px;
    font-size: 16px;
    color: #eee;
    height: 35px;
    background: rgba($color: #000000, $alpha: .5);
    flex: 1;
    border-radius: 10px;
    padding-left: 5px;
  }
  .log-btn{
    margin-left:50%;
    transform: translateX(-50%);
    padding: 10px 50px;
    font-size: 14px;
    background: $theme-color;
    color:#fff;
    outline: none;
    border:none;
    border-radius: 10px;

  }
  input::-webkit-input-placeholder {
    color: #eee;
  }
}

</style>